<template>
  <div class="container">
    <!-- 左侧功能栏 -->
    <div class="sidebar">
      <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#f4f4f4"
          text-color="#333"
          active-text-color="#409EFF"
      >
        <el-menu-item index="/chat">
          <i class="el-icon-menu"></i>对话
        </el-menu-item>
        <el-menu-item index="/api/goods">
          <i class="el-icon-document"></i>购买
        </el-menu-item>
        <el-menu-item index="/home">
          <i class="el-icon-setting"></i>个人中心
        </el-menu-item>
      </el-menu>

      <!-- 底部按钮部分 -->
      <div class="sidebar-bottom">
        <el-button type="primary" size="small" @click="editProfile">个人信息修改</el-button>
        <el-button type="danger" size="small" @click="confirmLogout">退出登录</el-button>
      </div>

    </div>

    <!-- 右侧个人中心内容 -->
    <div class="content">
      <el-descriptions :column="1" border style="padding-top:50px;">
        <el-descriptions-item label="账号">
          <template v-slot:label>
            <i class="el-icon-s-custom"></i>
            账号
          </template>
          {{ user.username }}
        </el-descriptions-item>

        <el-descriptions-item label="邮箱">
          <template v-slot:label>
            <i class="el-icon-files"></i>
            邮箱
          </template>
          {{ user.email }}
        </el-descriptions-item>

        <el-descriptions-item label="token值">
          <template v-slot:label>
            <i class="el-icon-s-comment"></i>
            token值
          </template>
          {{ user.tokens }}
        </el-descriptions-item>
      </el-descriptions>

      <DateUtils></DateUtils>
    </div>
  </div>
</template>

<script>
import DateUtils from "./DateUtils";
export default {
  name: "Home",
  components: { DateUtils },

  data() {
    return {
      user: {
        username: '',
        email: '',
        tokens: ''
      }
    };
  },

  created() {
    this.init(); // 组件创建时初始化用户信息
  },

  methods: {
    init() {
      // 从 localStorage 获取用户名、邮箱和 token 值
      const username = localStorage.getItem('username');
      const email = localStorage.getItem('email');
      const tokens = localStorage.getItem('tokens');

      // 如果存在，设置到 user 对象中
      this.user = {
        username: username || '未登录',
        email: email || '未设置邮箱',
        tokens: tokens || '无 token 值'
      };
    },

    editProfile() {
      this.$message('个人信息修改功能尚未实现！');
    },
    confirmLogout() {
      this.$confirm('确定要退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
    logout() {
      localStorage.clear(); // 清除 localStorage 中的所有数据
      this.$message.success('已退出登录');
      this.$router.push('/login');
    }
  },

};
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh; /* 使内容占满整个页面高度 */
}

.sidebar {
  width: 240px;
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar-bottom {
  display: flex;
  justify-content: space-between; /* 按钮水平排列，左右分布 */
  align-items: center;
  padding-top: 20px;
  width: 100%;
}

.sidebar-bottom .el-button {
  flex: 1;
  margin-right: 10px; /* 按钮之间的间距 */
}

.sidebar-bottom .el-button:last-child {
  margin-right: 0; /* 取消最后一个按钮的右侧间距 */
}

.content {
  flex: 1;
  padding: 40px;
  background-color: #f1f1f3;
  overflow-y: auto; /* 如果内容超出页面高度，则滚动 */
}

.el-descriptions {
  width: 90%;
  margin: 0 auto;
}
</style>
